import React, { useState } from 'react';
import { Switch, Table,Input } from 'antd';
import type { TableColumnsType } from 'antd';
import { 
  Button, 
  Space,

  Modal,
  Select,
  Tabs,
  TreeSelect,
  Form,
  Cascader,
  InputNumber,
  DatePicker,
  Upload,
  message 
} from 'antd';
import {
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  DeleteOutlined,
  ClockCircleOutlined,
  DownOutlined,
  SearchOutlined,
  FilterOutlined,
  BorderOutlined,
  MenuUnfoldOutlined,
  SyncOutlined,
  FullscreenOutlined
} from '@ant-design/icons';
interface DataType {
  key: React.Key;
  name: string;           // 产品名称
  productCode: string;    // 产品编码
  brand: string;          // 品牌
  specification: string;  // 规格型号
  unit: string;           // 单位
  currentStock: number;   // 当前可用库存数量
  salesQuantity: number;  // 销售数量
  unitPrice: number;      // 销售单价(含税)/元
  taxRate: number|string;        // 增值税税率%
  originalTotal: number;  // 产品原价合计(含税)/元
  actualPrice: number;    // 实际售价(含税)/元
  actualTotal: number;    // 实际售价合计(含税)/元
}



const App: React.FC = () => {
  const [fixedTop, setFixedTop] = useState(false);

  
const columns: TableColumnsType<DataType> = [
  {
    title: '产品名称',
    
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
  },
  {
    title: '产品编码',
   
    dataIndex: 'age',
    key: 'age',
    fixed: 'left',
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    
  },
  {
    title: '规格型号',
    dataIndex: 'specification',
   
   
  },
  {
    title: '单位',
    dataIndex: 'unit',
    
  },
  {
    title: '当前可用库存数量',
    dataIndex: 'currentStock',
    
   
  },
  {
    title: '销售数量',
    dataIndex: 'salesQuantity',
    render:()=>{
      return <Input></Input>
    }
   
  },
  {
    title: '销售单价(含税)/元',
    dataIndex: 'unitPrice',
    render:()=>{
      return <Input></Input>
    }
   
  },
  {
    title: '增值税税率%',
    dataIndex: 'taxRate',
    
   
  },
  { title: '产品原价合计(含税)/元', dataIndex: 'originalTotal', key: '8' },
  {
    title: '实际售价(含税)/元',
    dataIndex:"autualPrice",
    
    
    
  },
   {
    title: '实际售价合计(含税)/元',
   
   dataIndex:"actualTotal"
  },
];

// const dataSource: DataType[] = useState([
//   {
//     key: '1',
//     name: '暂无内容',
//     productCode: '暂无内容',
//     brand: '暂无内容',
//     specification: '暂无内容',
//     unit: '暂无内容',
//     currentStock: 0,
//     salesQuantity: 0,
//     unitPrice: 0,
//     taxRate: "暂无内容",
//     originalTotal: 0.00,
//     actualPrice: 0.00,
//     actualTotal: 0.00
//   },
 
 
// ])
  const [dataSource,setdataSource] =useState([
    {
    key: '1',
    name: '暂无内容',
    productCode: '暂无内容',
     brand: '暂无内容',
    specification: '暂无内容',
     unit: '暂无内容',
     currentStock: 0,
    salesQuantity: 0,
    unitPrice: 0,
     taxRate: "暂无内容",
    originalTotal: 0.00,
    actualPrice: 0.00,
    actualTotal: 0.00
    }
  ])

  return (
    <div>
      <Table<DataType>
         style={{maxWidth:"100%"}}
      columns={columns}
      dataSource={dataSource}
        scroll={{ x: 'max-content' }}
      
      // antd site header height
      sticky={{ offsetHeader: 64 }}
    />
           <div style={{ display: 'flex', marginBottom: 16 }}>
                    <Button icon={<PlusOutlined />} className='yanse2' onClick={()=>{
                      let obj={
                            key: '1',
                            name: '1111',
                            productCode: '暂无内容',
                            brand: '暂无内容',
                            specification: '暂无内容',
                            unit: '暂无内容',
                            currentStock: 0,
                            salesQuantity: 0,
                            unitPrice: 0,
                            taxRate: "暂无内容",
                            originalTotal: 0.00,
                            actualPrice: 0.00,
                            actualTotal: 0.00
                      }
                      setdataSource((aa)=>[...aa,obj])
                    }}>添加</Button>
                     <Button icon={<ClockCircleOutlined />} className='yanse2' style={{ marginLeft: 8 }}>快速填报</Button>
               </div>
    </div>
  );
};

export default App;